import React, { memo } from "react";
import { UserGoodsWrapper } from "./style";
import { ShopOutlined } from "@ant-design/icons";
import { Empty } from "antd";
export default memo(function Goods(props) {
  const { goodsList } = props;
  return (
    <UserGoodsWrapper>
     { goodsList.length>0?( <div>
      {goodsList.map((item) => {
        return (
          <div className="goods-item" key={item.orderInfo.id}>
            <div className="top">
              <div className="shopInfo">
                <ShopOutlined />
                <div className="name"> {item.shopInfo.name}</div>
                <div className="type">官方</div>
              </div>
              <div className="status">{item.orderInfo.statusStr}</div>
            </div>
            <div className="center">
              <div className="goods-left">
                <img src={item.goods[0].pic} alt="" />
              </div>
              <div className="goods-right">
                <div className="name">{item.goods[0].goodsSubName}</div>
                <div className="price">
                  <div className="unit-price">
                    ￥{item.goods[0].amountSingleBase.toFixed(2)}
                  </div>
                  <div className="goodsNumber">
                    x{item.orderInfo.goodsNumber}
                  </div>
                </div>
                <div className="dateAdd">{item.orderInfo.dateAdd}</div>
                <div className="sum-price">
                  实付:￥{item.orderInfo.amount.toFixed(2)}
                </div>
              </div>
            </div>
            <div className="bottom"></div>
          </div>
        );
      })}
     </div>):(<Empty className='empty' description='暂无相关数据' image={Empty.PRESENTED_IMAGE_SIMPLE} />)}
    </UserGoodsWrapper>
  );
});
